<template>
  <div class="container">
    <h3>vue+openlayers: 双击鼠标显示品牌代言人名片</h3>
    <div id="vue-openlayers"></div>
    <div id="popup-box" class="ol-popup">
      <div id="popup-content">
        <div class="left">
          <img :src="imgurl" >
        </div>
        <div class="right">
          <div class="name">{{ name }}</div>
          <div class="dec">{{ phone }}</div>
          <div class="dec">{{ email }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile' // 瓦片图层
import XYZ from 'ol/source/XYZ' // 瓦片数据源
import Overlay from 'ol/Overlay' // 弹出框
import { formLonLat, toLonLat, transform } from 'ol/proj' // 坐标转换
import VectorLayer from 'ol/layer/Vector' // 矢量图层
import VectorSource from 'ol/source/Vector' // 矢量数据源
import Style from 'ol/style/Style' // 样式
import Icon from 'ol/style/Icon' // 图标样式
import Text from 'ol/style/Text' // 文本样式
import Fill from 'ol/style/Fill' // 填充样式
import Stroke from 'ol/style/Stroke' // 边线样式
import Feature from 'ol/Feature' // 要素
import { Point } from 'ol/geom' // 点要素
import * as Interaction from 'ol/interaction' // 交互
export default {
  data() {
    return {
      map: null, // 地图对象
      overlayer: null, // 弹出框
      vsource: new VectorSource({}), // 矢量数据源
      imgurl: null,
      name: '',
      phone: '',
      email: '',
      citys: [
        {
          name: '段',
          position: [73, 19],
          phone: '123456789',
          email: '123313@qq.com',
          imgurl: require('../../assets/cat1.jpg')
        },
        {
          name: '李',
          position: [77, 28],
          phone: '123456789',
          email: '98897@qq.com',
          imgurl: require('../../assets/cat2.jpg')
        }
      ]
    }
  },
  mounted() {
    this.initMap()
    this.companyPoint()
  },
  methods: {
    initMap() {
      let layer = new Tile({
        source: new XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7'
        })
      })
      
      let cityLayer = new VectorLayer({
        source: this.vsource
      })

      this.map = new Map({
        target: 'vue-openlayers',
        layers: [layer, cityLayer],
        view: new View({
          center: [77, 28],
          zoom: 5,
          projection: 'EPSG:4326' // 坐标系
        }),
        interactions:new Interaction.defaults({
          doubleClickZoom: false
        })
      })
      this.clickPoint()
    },

    // 城市点层
    companyPoint() {
      let features= []
      let data = this.citys // 城市数据
      for (var i = 0; i < data.length; i++ ) {
        let feature = new Feature({
          geometry: new Point(data[i].position), // 坐标
          persondata: data[i]
        })
        let img = data[i].imgurl
        feature.setStyle(this.pointStyle(img))
        features.push(feature)
      }
      this.vsource.addFeatures(features)
    },

    // 点样式
    pointStyle(img) {
      let Styles = []
      Styles.push(
        new Style({
          image: new Icon({
            src: img,
            scale: 0.1,
            anchor: [0.5, 0.5] // 图标中心点
          })
        })
      )
      return Styles
    },

    // hover显示城市信息
    clickPoint() {
      // 设置浮层
      const box = document.getElementById('popup-box')
      this.overlayer = new Overlay({
        element: box,
        autoPan: { // 自动平移
          animation: { // 当Popup超出地图边界时，为了Popup全部可见，地图移动的动画
            duration: 250 // 当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
          }
        }
      })
      this.map.addOverlay(this.overlayer)

      // 显示内容
      // let _that = this
      this.map.on('dblclick', (e)=> {
        let feature = this.map.forEachFeatureAtPixel(e.pixel, (feature) => { // 获取点击的feature e.pixel是点击时的坐标
          return feature
        })
        if (feature) {
          let person = feature.get('persondata') // 获取属性值
          this.imgurl = person.imgurl
          this.name = person.name
          this.phone = person.phone
          this.email = person.email
          this.overlayer.setPosition(e.coordinate) // 设置弹出框位置 e.coordinate是点击时的坐标
        } else {
          this.overlayer.setPosition(undefined) // 设置弹出框位置 undefined为隐藏
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: 750px;
    margin: 50px auto;
    border: 1px solid #ccc;
    #vue-openlayers {
      width: 100%;
      height: 750px;
      margin: 0 auto;
      border: 1px solid #42b983;
      position: relative;
    }

    .ol-popup {
      position: absolute;
      background-color: rgba(210, 105, 30, 0.8);
      padding: 5px;
      border-radius: 5px;
      border: 1px solid #42b983;
      bottom: 24px;
      left: -50px;
      color: #fff;
      min-width: 200px;
      #popup-content {
        width: 270px;
        height: 120px;
        border-radius: 10px;
        display: flex;
        .left {
          width: 100px;
          height: 120px;
          img {
            width: 100px;
            height: 120px;
          }
        }
        .right {
          width: 160px;
          height: 120px;
          text-align: left;
          padding-left: 10px;
          .name {
            line-height: 50px;
            font-size: 20px;
          }
          .dec {
            line-height: 30px;
            font-size: 14px;
          }
        }
      }
    }
    .ol-popup:after,
    .ol-popup:before {
      top: 100%;
      border: solid transparent;
      content: ' ';
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    } // 三角形
    .ol-popup:after {
      border-top-color: rgba(210, 105, 30, 0.8);
      border-width: 10px;
      left: 48px;
      margin-left: -10px;
    } // 三角形
    .ol-popup:before {
      border-top-color: #42b983;
      border-width: 11px;
      left: 48px;
      margin-left: -11px;
    } // 三角形
  }
</style>